<template>
  <div class="right-bottom">
    <vue-seamless-scroll :data="listData" class="warp" class-option="step:0.5">
      <ul class="list">
        <li v-for="(i,index) in listData" :key="index">
          <div class="item-one">
            <div class="min-div">产品:<span class="product">{{ i.materialName }}</span></div>
            <div class="min-div">型号:<span class="model">{{ i.materialModel }}</span></div>
            <div class="min-div">规格:<span class="specification">{{ i.materialSpecification }}</span></div>
            <div class="min-div">单位:<span class="unit">{{ i.materialUnit }}</span></div>
          </div>
          <div class="item-two">
            <div class="min-div">库存:<span class="stock">{{ i.totalInventory }}</span></div>
            <div class="min-div">已生产:<span class="production">{{ i.productQuantity }}</span></div>
            <div class="min-div">待生产:<span class="require">{{ i.requireQuantity }}</span></div>
            <div class="min-div">碳排放:<span class="carbon">{{ i.totalCarbonEmission }}</span></div>
          </div>
          <div class="line">--------------------------------------------------------------</div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },

  data() {
    return {
      listData:[]
    };
  },
  computed: {
  },
  created() {
    currentGET("big5").then(res => {
      this.listData = res.rows;
    });
  },

  mounted() { },
  methods: {

  },
};
</script>
<style lang='scss' scoped>
.line{
  color: #2c88f0d1;
}
.item-one,.item-two{
  display: flex;
}
.min-div{
  width: 180px;
  margin-left: 5px;
}
.product{
  color: #2c88f0d1;
  font-weight: bolder;
}
.model{
  color: #ffffff;
  font-size: large;
}
.specification{
  color: orange;
  font-size: large;
}
.unit{
  color: orange;
  font-size: large;
}
.warp{
  width: 500px;
  height: 250px;
  margin: 0 auto;
  margin-left: 25px;
  overflow: hidden;
}
</style>